<!DOCTYPE html>
<html>
<head>
	<title>审批列表</title>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="../dist/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/atom.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/common.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/checkbox.pretty.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/select.css"/>
	<style type="text/css">
		#wrapper{
			width: 100%;
			position: absolute;
			left: 0;
			top: 3.5rem;
			bottom: 0rem;
			z-index: 1;
		}

		#wrapper li{
		    max-height: 18rem;
		    line-height: 1.5rem;
		    text-align: left;
		    border-bottom: 1px solid rgba(0,0,0,.1);
		    /* overflow: hidden; */
		    padding: 0 0.5rem;
		}
		#wrapper .tab-bar li,#wrapper .filter-bar li{
			line-height: 2.6rem;
			text-align: center;
		}
		.more{
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
		}
		.pull_icon{
			width: 25px;
			height: 25px;
			background-image: url('../dist/imgs/pull.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 25px;
			transition: all .5s;
		}
		.more span{
			padding-left: .5rem;
		}

		.more .flip{
			transform: rotate(180deg);
		}
		.loading{
			background-image: url('../dist/imgs/loading.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 25px;
		}
		.more .loading{
		  -webkit-transform: rotate(0deg) translateZ(0);
		  -webkit-transition-duration: 0;
		  -webkit-animation-name: loading;
		  -webkit-animation-duration: 2s;
		  -webkit-animation-iteration-count: infinite;
		  -webkit-animation-timing-function: linear;
		}

		@-webkit-keyframes loading {
		  from {
		    -webkit-transform: rotate(0deg) translateZ(0);
		  }
		  to {
		    -webkit-transform: rotate(360deg) translateZ(0);
		  }
		}
	</style>
</head>
<body>
	<!-- header -->
	<header>
		<div class="left">
			<!-- <span class="logo-graphic">A</span> -->
			<a onclick="javascript:window.history.back();"><i class="fa fa-angle-left"></i><em class="fw-normal">审批列表</em></a>
			</a>
		</div>
	</header>
	<!-- header END -->
	<section class="container bg-grey">
			

		<div id="wrapper">
			<div class="scroller">
				<ul class="tab-bar mgt-1">
					<li class="tab-item active">待我审批(0)</li>
					<li class="tab-item">我提交的(0)</li>
				</ul>
				<ul class="filter-bar">
					<li class="js-search"><i class="fa fa-search"></i>搜索</li>
					<li class="js-filter"><i class="fa fa-filter"></i>过滤</li>
				</ul>
				<p class="filter-notation">筛选条件: 
					<i class="">全部</i>
				</p>
				<ul class="inspect-blk"  id="thelist" style="margin:0;width:100%;">
					<li>
						<a href="inspectApproval.html">
							<div class="type-label">
								<p>请假</p>
							</div>
							<div class="person-info">
								<img src="../dist/imgs/error.png" class="img-header" alt="">
								<div>
									<p class="person-name">李全蛋</p>
									<i class="date-string">2015-10-23 12:10:14</i>
								</div>
							</div>
							<div class="inspect-info">
								<label>请假时间：</label><p>2015-10-21 到 2015-10-24，共1天</p>
								<label>请假理由：</label><p>发高烧</p>
								<label>备注：</label><p class="longP">请假时间，xxx工作有xxx代替，具体的工具请看readmine</p>
							</div>
						</a>
					</li>
					<li class="mgt-1">
						<a href="inspectApproval.html">
							<div class="type-label">
								<p>报销</p>
							</div>
							<div class="person-info">
								<img src="../dist/imgs/error.png" class="img-header" alt="">
								<div>
									<p class="person-name">李全蛋</p>
									<i class="date-string">2015-10-23 12:10:14</i>
								</div>
							</div>
							<div class="inspect-info">
								<label>报销金额</label><p>2015.00元</p>
								<label>报销说明</label><p>xxx于2015-01-02 外地出差，然后下雨呀多福多寿的</p>
								<label>备注：</label><p class="longP">请假时间，xxx工作有xxx代替，具体的工具请看readmine</p>
							</div>
						</a>
					</li>
					<li class="mgt-1">
						<a href="inspectApproval.html">
							<div class="type-label">
								<p>请假</p>
							</div>
							<div class="person-info">
								<img src="../dist/imgs/error.png" class="img-header" alt="">
								<div>
									<p class="person-name">李全蛋</p>
									<i class="date-string">2015-10-23 12:10:14</i>
								</div>
							</div>
							<div class="inspect-info">
								<label>请假时间：</label><p>2015-10-21 到 2015-10-24，共1天</p>
								<label>请假理由：</label><p>发高烧</p>
								<label>备注：</label><p class="longP">请假时间，xxx工作有xxx代替，具体的工具请看readmine</p>
							</div>
						</a>
					</li>
					<li class="mgt-1">
						<a href="inspectApproval.html">
							<div class="type-label">
								<p>请假</p>
							</div>
							<div class="person-info">
								<img src="../dist/imgs/error.png" class="img-header" alt="">
								<div>
									<p class="person-name">李全蛋</p>
									<i class="date-string">2015-10-23 12:10:14</i>
								</div>
							</div>
							<div class="inspect-info">
								<label>请假时间：</label><p>2015-10-21 到 2015-10-24，共1天</p>
								<label>请假理由：</label><p>发高烧</p>
								<label>备注：</label><p class="longP">请假时间，xxx工作有xxx代替，具体的工具请看readmine</p>
							</div>
						</a>
					</li>
				</ul>

				<div class="more"><i class="pull_icon"></i><span>上拉加载...</span></div>
			</div>
		</div>

		<!-- iscroll list
		<div id="wrapper">
			<div id="scroller">
					
					<div id="pullUp">
						<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
					</div>
			</div>
		</div> -->
	</section>
	<!-- filter 弹出层 -->
	<div class="filter-label fade">
		<span class="type_desc">类型</span>
		<ul class="type_desc_list">
			<li class="active"><a href="">全部</a></li>
			<li><a href="javascript:void(0)">请假</a></li>
			<li><a href="javascript:void(0)">财务</a></li>
			<li><a href="javascript:void(0)">外出</a></li>
			<li><a href="javascript:void(0)">通用</a></li>
			<li><a href="javascript:void(0)">领用</a></li>
			<li><a href="javascript:void(0)">出差</a></li>
		</ul>
		<span class="type_desc">状态</span>
		<ul class="type_status_list">
			<li>
				<input type="radio" id="checkbox_a1" checked="checked" value="1" name="approval" class="chk_1" /> 
				<label style="vertical-align: middle;" for="checkbox_a1"></label>
				<label for="checkbox_a1">全部</label>
			</li>
			<li>
				<input type="radio" id="checkbox_a2" value="2" name="approval" class="chk_1" /> 
				<label style="vertical-align: middle;" for="checkbox_a1"></label>
				<label for="checkbox_a2">通过</label>
			</li>
			<li>
				<input type="radio" id="checkbox_a3" value="3" name="approval" class="chk_1" /> 
				<label style="vertical-align: middle;" for="checkbox_a1"></label>
				<label for="checkbox_a3">驳回</label>
			</li>
			<li>
				<input type="radio" id="checkbox_a4" value="4" name="approval" class="chk_1" /> 
				<label style="vertical-align: middle;" for="checkbox_a1"></label>
				<label for="checkbox_a4">待批改</label>
			</li>
		</ul>
		
		<span class="type_desc">部门</span>
		<div class="button custom-select">
		    <select name="" id="">
		       	<option value="-1">请选择部门</option>
		        <option value="1">财务部</option>
		        <option value="2">人事部</option>
		        <option value="3">市场部</option>
		        <option value="4">销售部</option>
		    </select>
		</div>
		<button class="btn btn-success mgt-1">搜索</button>
		<button class="btn btn-error filter-cancel mgt-1">取消</button>
	</div>
	<!-- 查询 弹出层 -->
	<div class="search-panel fade">
		<div class="search-bar">
			<i class="fa fa-search"></i>
			<input type="text" name="search" placehoder="搜索标题,内容,审批类型"/>
		</div>
				
		<button class="btn btn-success  mgt-1">搜索</button>
		<button class="btn btn-error search-cancel mgt-1">取消</button>
	</div>	
	
	<script type="text/javascript" src="../dist/js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../dist/js/equ.js"></script>
	<script type="text/javascript" src="../dist/js/iscroll.js"></script>
	
	<script type="text/javascript">
		// 搜索和过滤
		$(".js-search").on("click",function(){
			$(".search-panel").removeClass("fade");
			$("#wrapper").addClass("fade");
		});
		$(".js-filter").on("click",function(){
			$(".filter-label").removeClass("fade");
			$("#wrapper").addClass("fade");
		});
		$(".search-cancel").on("click",function(){
			$(".search-panel").addClass("fade");
			$("#wrapper").removeClass("fade");
		});
		$(".filter-cancel").on("click",function(){
			$(".filter-label").addClass("fade");
			$("#wrapper").removeClass("fade");
		})
	</script>

	<script type="text/javascript">
		// 过滤类型点击
		$(".type_desc_list li").on("click",function(){
			$(this).siblings().removeClass("active"); 
			$(this).addClass("active");
		});
	</script>

	<script>
		$("body").css("position","relative");
		var myscroll = new iScroll("wrapper",{
			onScrollMove:function(){
				if (this.y<(this.maxScrollY)) {
					$('.pull_icon').addClass('flip');
					$('.pull_icon').removeClass('loading');
					$('.more span').text('释放加载...');
				}else{
					$('.pull_icon').removeClass('flip loading');
					$('.more span').text('上拉加载...');
				}
				if(this.y>0){
					console.log("Y;",this.y);
					var top = $("#wrapper").attr("top");
				}	
			},
			onScrollEnd:function(){
				if ($('.pull_icon').hasClass('flip')) {
					$('.pull_icon').addClass('loading');
					$('.more span').text('加载中...');
					pullUpAction();
				}
				
			},
			onRefresh:function(){
				$('.more').removeClass('flip');
				$('.more span').text('上拉加载...');
			}
			
		});
		
		function pullUpAction(){
			setTimeout(function(){
				/*$.ajax({
					url:'/json/ay.json',
					type:'get',
					dataType:'json',
					success:function(data){
						for (var i = 0; i < 5; i++) {
							$('.scroller ul').append(data);
						}
						myscroll.refresh();
					},
					error:function(){
						console.log('error');
					},
				})*/
				for (var i = 0; i < 5; i++) {
					
					$('.scroller ul.inspect-blk').append("<li class=\"mgt-1\"><a href=\"inspectApproval.html\"><div class=\"type-label\"><p>请假</p></div><div class=\"person-info\"><img src=\"../dist/imgs/error.png\" class=\"img-header\" alt=\"\"><div><p class=\"person-name\">李全蛋</p><i class=\"date-string\">2015-10-23 12:10:14</i></div></div><div class=\"inspect-info\"><label>请假时间：</label><p>2015-10-21 到 2015-10-24，共1天</p><label>请假理由：</label><p>发高烧</p><label>备注：</label><p class=\"longP\">请假时间，xxx工作有xxx代替，具体的工具请看readmine</p></div></a></li>");
				}
				myscroll.refresh();
			}, 1000)
		}
		if ($('.scroller').height()<$('#wrapper').height()) {
			$('.more').hide();
			myscroll.destroy();
		}

	</script>
</body>
</html>